<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_01</title>
    <script src="../../js/jquery.min.js"></script>
    <style>
        table {
            border: 1px solid blue;
            border-collapse: collapse;
            width: 800px;
            margin: 10px auto;
        }

        table th, table td {
            border: 1px solid blue;
            padding: 10px;
        }

        .row1 {
            background: #33aaaa;
        }

        .row2 {
            /*background: #99aaaa;*/
            background-color:red;
        }
    </style>
</head>

<body>
<div>div_1</div>
<hr>

<table id="tab_1">
    <tr class="row1">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    <tr class="row2">
        <td>韩梅梅</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row1">
        <td>韩1</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row1">
        <td>韩2</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row2">
        <td>韩3</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row1">
        <td>韩4</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row2">
        <td>韩5</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr class="row1">
        <td>韩6</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
</table>
<hr>
<table id="tab_2">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>韩梅梅</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩1</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩2</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩3</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩4</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩5</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩6</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
</table>
<hr>
<table id="tab_3">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>韩梅梅</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩1</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩2</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩3</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩4</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩5</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
    <tr>
        <td>韩6</td>
        <td>18</td>
        <td>女</td>
        <td>99.5</td>
    </tr>
</table>
</body>
<script>
    onload = function () {
        // TODO 页面加载完毕，执行的操作
        changeColorByJS();
        $("#tab_3 tr:odd").css("background-color","red");
        $("#tab_3 tr:even").css("background-color","green");
    }
    function changeColorByJS(){
        // TODO 隔行变色
        var oTab = document.getElementById("tab_2");
        var collRows = oTab.getElementsByTagName("tr");
        for (let i = 0; i < collRows.length; i++) {
            if (i%2==0){
                collRows[i].style.background="red";
            }else {
                collRows[i].style.background="green";
            }
        }
    }
</script>
</html>